<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html>
<head>
    <title>高血压月度报告</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css" type="text/css">
    <link rel="stylesheet" href="../assets/css/views/modules/_common.scss">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <link rel="stylesheet" href="${assets}/css/views/department/departmentMgr.css">
    <script src="${newframe}/js/compatible.js"></script>
    <script src="${js}/jquery-1.9.1.min.js"></script>
    <script src="../assets/js/views/vue.min.js"></script>
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <style>
        @page
        {
            size: auto;   /* auto is the initial value */
            margin: 10mm 5mm 10mm 5mm;  /* this affects the margin in the printer settings 最关键的还是这个*/
        }
        body
        {
            margin: 0mm;  /* this affects the margin on the content before sending to printer */
            font-family: '思源黑体';
        }
       h1{
           font-family: MicrosoftYaHei;
           font-weight: normal;
           font-stretch: normal;
           letter-spacing: 0.4px;
           color: #2a3137;
           text-align:center;
       }
        .containers{
            margin-left:20px;
            margin-right:20px;
            margin-top:30px;
        }
        .title{
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.3px;
            color: #666666;
            margin-left:10px;
        }
        .content{
            height:auto !important;
            width:99% !important;
            box-shadow:none !important;
        }
        .infor span{
            font-size:15px;
            line-height:33px;
            color:#666666;
            display:inline-block;
        }
        b{
            font-family: MicrosoftYaHei-Bold;
            font-size: 15px;
            font-weight: normal;
            font-stretch: normal;
            color: #333333;
        }
        .checknews ul li{
            float:left;
            width:46%;
            border: solid 1px #e6e6e6;
            margin-left:2%;
            padding:4% 0;
        }
       .checknews ul li div{
           width:190px;
           margin:0 auto;
       }
       .checknews ul li div img{
           display:inline-block;
           width:58px;
           vertical-align:middle;
       }
       .checknews ul li div div{
           display:inline-block;
           width:97px;
           margin-left:27px;
           vertical-align:middle;
       }
       .checknews ul li div div p{
           text-align:center;
           font-family: MicrosoftYaHei;
           font-size: 16px;
           font-weight: normal;
           font-stretch: normal;
           letter-spacing: 0px;
           color: #333333;
       }
       .checknews ul li div div p:nth-child(1){
           font-size:30px;
           line-height:40px;
       }
        label{
            font-family: PingFang-SC-Regular;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 35px;
            letter-spacing: 0px;
            color: #999999;
        }
        .bpnews{
            margin-left:1.8%;
            margin-top:10px;
        }
        .bpnews div span{
            display:inline-block;
            text-align:center;
            font-family: PingFang-SC-Regular;
            font-size: 16.1px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #666666;
        }
        .first1 span{
            margin-left:3%;
            margin-right:3%;
        }
       table thead th{
           font-family: MicrosoftYaHei;
           font-size: 16px;
           font-weight: normal;
           font-stretch: normal;
           line-height: 30px;
           letter-spacing: 0px;
           color: #666666;
           text-align:center;
       }
        .factor{
            width:97%;
            margin:0 auto;
            margin-top:15px;
        }
        .factor li{
            font-family: PingFang-SC-Regular;
            font-size: 16.1px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
        }
       .factor li p{
           vertical-align:top;
           display:inline-block;
           margin-top:1px;
           width:80%;
           line-height:35px;
       }
        .live span{
            margin-left:3%;
            margin-right:3%;
        }
        th{
            cursor:auto !important;
        }
        td{
            color:#333333;
            text-align:center;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #333333;
            line-height:46px;
        }
        tr{
            border-bottom:1px solid #e6e6e6
        }
        .nonejson{
            font-family: PingFang-SC-Regular;
            font-size: 16.1px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
            line-height:30px;
        }
        .infor span{
            margin-left:3%;
            margin-right:3%;
        }
        .btn{
            width: 80px;
            line-height:17px;
            background-color:#35acfd;
            border-radius: 5px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.3px;
            color: #ffffff;
            border:none;
            margin-bottom:3px;
        }
        .stamp{
            background:white;
            color:black;
            border:1px solid #666666;
        }
        .activebtn{
            width: 80px;
            line-height:17px;
            background-color:#35acfd;
            border-radius: 5px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.3px;
            color: #ffffff;
            border:none;
            margin-bottom:3px;
        }
        input{
            line-height:25px !important;
            height:28px !important;
            width:100px !important;
            display:inline-block !important;
        }
        .text{
            font-family: PingFang-SC-Regular;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 25.3px;
            letter-spacing: 0px;
            color: #333333;
            width:97% !important;
            margin:0 auto;
            margin-top:15px;
            height:90px;
            border:1px solid rgb(230, 230, 230);
            text-indent:2.5rem;
        }
    </style>
</head>
<body>
    <%@ include file="../../breadline.jsp" %>
    <!--startprint-->
    <%--<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>--%>
    <div style="background:white;padding-bottom:30px;">
        <div class="wrap" style="width:842px;overflow:hidden;margin:0 auto;border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6;">
            <div class="content" id="content">
                <div style="width:100%;overflow:hidden;position:relative;height:60px;">
                    <h1 style="position:absolute;width:100%;text-align:center;">{{ datetimes }}月检测报告</h1>
                    <div style="position:absolute;top:16px;right:3%;" class="click">
                        <span style="font-size:16px;">时间</span>
                        <input id="input" onclick="setmonth(this)" class="form-control input" @blur="getMonth()">
                        <button class="btn stamp" disabled @click="printdiv()" style="margin-left:10px;">打印</button>
                    </div>
                </div>
                <p style="height: 1px;background-color: #e6e6e6;width:93%;margin:0 auto;"></p>
                <div class="containers">
                    <div class="illnessnews">
                        <div>
                            <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                            <span class="title">病人基本信息</span>
                        </div>
                    </div>
                    <div class="first_news">
                        <div style="display: flex;">
                            <div class="infor" style="width:90%;margin-left:2%;margin-top:15px;">
                                <div>
                                    <span style="margin-left:0px;">姓名: &nbsp;{{infor.realname}}</span>
                                    <span>性别: &nbsp;{{infor.sex}}</span>
                                    <span>年龄: &nbsp;{{infor.age}}</span>
                                    <span>出生日期: &nbsp;{{infor.birthday}}</span>
                                </div>
                                <div>
                                    <span style="margin-left:0px;">身份证号: &nbsp;{{infor.idcard}}</span>
                                    <span>联系电话: &nbsp;{{infor.phone}}</span>
                                </div>
                                <div>
                                    <span style="margin-left:0px;">身高: &nbsp;{{infor.height}}cm</span>
                                    <span>体重: &nbsp;{{infor.weight}}kg</span>
                                    <span>BMI: &nbsp;{{infor.bMI}}</span>
                                    <span>腰围: &nbsp;{{infor.waist}}cm</span>
                                </div>
                                <div class="other">
                                    <span style="margin-left:0px;">地址: &nbsp;{{infor.homeaddress}}</span>
                                </div>
                                <div>
                                    <span style="margin-left:0px;">现患疾病诊断信息: &nbsp;{{infor.diseaseDiagnosis}}</span>
                                </div>
                                <div class="type" style="margin-top:5px;">
                                    <b style="margin-right:5%;font-weight: 100;">建档医生: &nbsp;{{infor.doctor}}</b>
                                    <b style="font-weight: 100;">建档机构: &nbsp;{{infor.hospName}}</b>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <p style="height: 1px;background-color: #e6e6e6;width:92%;margin:0 auto;margin-top:30px;"></p>
                <div class="containers">
                    <div class="checknews">
                        <div class="illnessnews">
                            <div>
                                <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                                <span class="title">检测信息</span>
                            </div>
                        </div>
                        <ul style="width:95%;margin:0 auto;overflow: hidden;margin-top:25px;margin-bottom:25px;">
                            <li>
                                <div>
                                    <img src="../assets/images/times.png" alt="img">
                                    <div>
                                        <p>{{bigtimes}}</p>
                                        <p>总共检验次数</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <img src="../assets/images/times1.png" alt="">
                                    <div>
                                        <p>{{smalltimes}}</p>
                                        <p>血压异常次数</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <p style="height: 1px;background-color: #e6e6e6;width:92%;margin:0 auto;margin-top:30px;"></p>
                <div class="containers">
                    <div>
                        <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                        <span class="title">高血压信息</span>
                    </div>
                    <div class="bpnews">
                        <div class="first1">
                            <label>高血压类型</label>
                            <span>{{infor.bpType}}级</span>
                            <label>高血压并发症</label>
                            <span style="width:auto;">{{illness}}</span>
                        </div>
                        <div class="live">
                            <label>生活习惯</label>
                            <span style="margin-left:4.5%;" v-if="infor.smoke === 0">不吸烟</span>
                            <span style="margin-left:4.5%;" v-else="infor.smoke === 1">吸烟</span>
                            <b>|</b>
                            <span v-if="infor.smoke === 0">不饮酒</span>
                            <span v-else="infor.smoke === 1">饮酒</span>
                            <b>|</b>
                            <span v-if="infor.physical === 0">没有参加体力活动</span>
                            <span v-else="infor.physical === 1">参加体力活动</span>
                        </div>
                    </div>
                </div>
                <p style="height: 1px;background-color: #e6e6e6;width:92%;margin:0 auto;margin-top:25px;"></p>
                <div class="containers">
                    <div>
                        <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                        <span class="title">高危因素</span>
                    </div>
                    <ul class="factor">
                        <li v-if="factor.value">
                            <p>血压高值（收缩压 130～139mmHg 和/或舒张压 85～89mmHg）</p>
                        </li>
                        <li v-if="factor.fat">
                            <p>超重或肥胖，和（或）腹型肥胖：超重：28 kg/m²>BMI ≥ 24 kg/m² ；肥胖：BMI ≥ 28 kg/m²
                                腰围：男≥90cm（2.7 尺），女≥85cm（2.6 尺）为腹型肥胖</p>
                        </li>
                        <li v-if="factor.family">
                            <p>高血压家族史（一、二级亲属）</p>
                        </li>
                        <li v-if="factor.salt">
                            <p>长期膳食高盐</p>
                        </li>
                    </ul>
                    <p class="nonejson" style="text-align:center;width:100%;" v-if="Lilength === 0">暂无数据</p>
                </div>
                <p style="height: 1px;background-color: #e6e6e6;width:92%;margin:0 auto;margin-top:25px;"></p>
                <div class="containers" id="tablepart">
                    <div>
                        <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                        <span class="title">正常数据</span>
                    </div>
                    <div style="margin-top:25px;margin-bottom:25px;">
                        <table id="example" class="display" cellspacing="10" width="98%">
                            <thead>
                            <tr style="width:100%;height:30px;bordr:none !important;cursor:auto !important;background:url('../assets/images/bgimg.png') no-repeat 0 0">
                                <th style="width:22.5%">检测时间</th>
                                <th style="width:22.5%">收缩压</th>
                                <th style="width:22.5%">舒张压</th>
                                <th style="width:22.5%">心率</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in bpjson">
                                <td>{{ item.TestTime }}</td>
                                <td>{{ item.valueP }}</td>
                                <td>{{ item.valueL }}</td>
                                <td>{{ item.valueH }}</td>
                            </tr>
                            </tbody>
                        </table>
                        <p v-show="bpshow" class="nonejson" style="text-align:center;width:100%;">暂无数据</p>
                    </div>
                    <div>
                        <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                        <span class="title">异常数据</span>
                    </div>
                    <div style="margin-top:25px;margin-bottom:25px;">
                        <table id="example1" class="display" cellspacing="10" width="98%">
                            <thead>
                            <tr style="width:100%;height:30px;bordr:none !important;cursor:auto !important;background:url('../assets/images/bgimg.png') no-repeat 0 0">
                                <th style="width:22.5%">检测时间</th>
                                <th style="width:22.5%">收缩压</th>
                                <th style="width:22.5%">舒张压</th>
                                <th style="width:22.5%">心率</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in unbpjson">
                                <td>{{ item.TestTime }}</td>
                                <td>
                                    <span v-if="item.valueP >= 140" style="color:red">{{item.valueP}}</span>
                                    <span v-else>{{item.valueP}}</span>
                                </td>
                                <td>
                                    <span v-if="item.valueL >= 90" style="color:red">{{item.valueL}}</span>
                                    <span v-else>{{item.valueL}}</span>
                                </td>
                                <td>{{ item.valueH }}</td>
                            </tr>
                            </tbody>
                        </table>
                        <p v-show="unbpshow" class="nonejson" style="text-align:center;width:100%;">暂无数据</p>
                    </div>
                </div>
                <div class="containers">
                    <div>
                        <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                        <span class="title">医生建议</span>
                    </div>
                    <textarea class="text" type="text" v-model="text"></textarea>
                </div>
            </div>
        </div>
    </div>
    <!--endprint-->
    <script>
        var vm = new Vue({
            el:'.wrap',
            data:{
                idcard:'',
                infor:[],
                illness:[],
                url:'',
                // 总共检验次数
                bigtimes :'',
                // 血压异常检验次数
                smalltimes : '',
                // 正常数据
                bpjson:[],
                // 异常数据
                unbpjson:[],
                // 显示隐藏是否有正常数据
                bpshow:false,
                // 显示颖仓是否有异常数据
                unbpshow:false,
                // 高危因素
                factor : [],
                datetimes:'',
                month:'',
                datetime:'',
                // li长度
                Lilength :'',
                bpjsons:'',
                text:''
            },
            mounted(){
                // 初始化获取当前病人 idcard
                let that = this;
                if( localStorage.getItem("bptext") ){
                    that.text = localStorage.getItem("bptext")
                }else{
                    that.text = '食盐摄入过多、常以纯淀粉类为餐、习惯食用煮过头的蔬菜、食用水果不足、不习惯过多饮水造成，以及过多摄入肉蛋奶糖造成；总的来说，高血压是体征偏酸（热）所导致的热性病。'
                }
                var href = decodeURI(decodeURI(location.search.split('?')[1]));
                var arr = href.split('&')[0]
                var url = arr.split('=')[1]
                var arr1 = href.split('&')[1]
                that.idcard = url
                that.url = '${URL_PATIENT_BPINFO}?idCard='+url
                // 获取传递过来的日期时间
                var datetime = href.split('&')[1].split('=')[1].slice(0,7)
                that.datetimes = datetime.slice(0,4) + '年' + datetime.slice(5,7)
                that.datetime = datetime.slice(0,4) + '-' + datetime.slice(5,7)
                that.month = datetime.slice(0,4) + '-' + datetime.slice(5,7)
                $('#input').val(that.month)
                // 高危因素
                that.factors(url,datetime)
                // 获取病人信息
                $.ajax({
                    url:"${URL_PATIENT_PATIENTINFO}",
                    type:'post',
                    dataType: "json",
                    data:{
                        idCard:url
                    },
                    success: function(data){
                        that.infor = data.data;
                        var arr = ['脑血管疾病','心脏疾病','肾脏疾病','血管疾病','重度高血压视网膜病变']
                        if( that.infor.bpComplication != null ){
                            var arr1 = that.infor.bpComplication.split(",")
                            for( var a = 0 ; a < arr1.length; a++ ){
                                that.illness.push(arr[arr1[a]-1])
                            }
                            that.illness = that.illness.join(',')
                        }else{
                            that.illness =""
                        }
                    }
                })
                // 获取表格数据
                that.table(url,datetime)
            },
            methods:{
                getMonth:function(){
                    return this.get()
                },
                get:function(){
                    let that = this;
                    setTimeout(function(){
                        that.datetime = $('#input').val()
                        that.datetimes = that.datetime.slice(0,4) + '年' + that.datetime.slice(5,7)
                        Promise.all([
                            that.factors(that.idcard,that.datetime),
                            that.table(that.idcard,that.datetime)
                        ]).then(function(resultList){
                            that.$forceUpdate()
                        })
                    },100)
                },
                printdiv:function(){
                    let that = this;
                    localStorage.setItem("bptext",that.text);
                    if(navigator.userAgent.toLowerCase().indexOf("chrome") == -1){
                        alert('请使用谷歌浏览器，否则相关功能将不能正常使用！')
                    }
                    this.remove_ie_header_and_footer()
                    $('.click').css({
                        'display' : 'none'
                    })
                    $('.wrap').css({
                        'border' : 'none'
                    })
                    $('.lump').css({
                        'display' : 'none'
                    })
                    $('body').css({
                        'fontSize': '14px',
                        'fontFamily' : 'MicrosoftYaHei'
                    })
                    $('.text').text(that.text)
                    $('.text').css({
                        'border':'none'
                    })
                    // 获取当前页的html代码
                    var bdhtml = window.document.body.innerHTML
                    // 设置打印开始区域
                    var startStr = '<!--startprint-->'
                    // 设置打印结束区域
                    var endStr = '<!--endprint-->'
                    // 从标记里获取需要打印的页面
                    var printHtml = bdhtml.substring(bdhtml.indexOf(startStr) + startStr.length, bdhtml.indexOf(endStr))
                    // 也可以通过id获取
                    // var printHtml = document.getElementById('printid').innerHTML
                    // 需要打印的页面
                    window.document.body.innerHTML = printHtml
                    window.print()
                    // 还原界面
                    window.document.body.innerHTML = bdhtml
                    // 获取当前 url
                    parent.showSrc('${URL_MONTHREPORT_TOBPREPORT}?idcard=' + that.idcard + '&date=' + that.datetime)
                },
                remove_ie_header_and_footer:function(){
                    var hkey_path;
                    $('h1').css({
                        'fontSize' : '30px'
                    })
                    try{
                        var RegWsh = new ActiveXObject("WScript.Shell")
                        hkey_key="header"
                        RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&w&b页码，&p/&P")
                        hkey_key="footer"
                        RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&u&b&d")
                    }catch(e){}
                },
                // 获取表格信息
                table : function(url,datetime){
                    let that = this;
                    $.ajax({
                        url:"${URL_TESTRESULT_PATIENTBPTESTS}",
                        data:{
                            idCard:url,
                            reportTime:datetime,
                            testKindCode:'104'
                        },
                        dataType:"json",
                        type:"post",
                        success:function(data){
                            that.bpjsons = data.dataList
                            if( data.dataList.length != 0 ) {
                                var arr = data.dataList;
                                for( var a = 0; a < arr.length; a++ ) {
                                    arr[a].TestTime = arr[a].TestTime.slice(0, 10)
                                    if (arr[a].error === 0) {
                                        that.bpjson.push(arr[a])
                                        if( that.bpjson.length === 0 ){
                                            that.bpshow = true;
                                        }else{
                                            that.bpshow = false;
                                        }
                                    } else if (arr[a].error === 1) {
                                        that.unbpjson.push(arr[a])
                                        if( that.unbpjson.length === 0 ){
                                            that.unbpshow = true;
                                        }else{
                                            that.unbpshow = false;
                                        }
                                    }
                                }
                                that.bigtimes = parseInt(that.unbpjson.length) + parseInt(that.bpjson.length)
                                that.smalltimes = that.unbpjson.length
                            }else{
                                that.bpjson = []
                                that.bigtimes = 0;
                                that.smalltimes = 0;
                                that.unbpjson = []
                                that.bpshow = true;
                                that.unbpshow = true
                            }
                        }
                    })
                },
                factors:function(url,datetime){
                    let that = this;
                    $.ajax({
                        url:"${URL_SCREENING_BPMONTH}",
                        data:{
                            reportTime:datetime,
                            idCard:url
                        },
                        dataType:"json",
                        type:'post',
                        success:function(data){
                            if( data.data != null ){
                                that.Lilength = '1'
                                that.factor = data.data
                                setTimeout(function(){
                                    // 获取 li 长度
                                    var factor = $('.factor li')
                                    // 添加序号
                                    for( var a = 0; a < factor.length; a++ ){
                                        var label = '<label style="margin-right:2%;">' + '( ' + (a+1) + ' )' + '</label>'
                                        $(factor[a]).prepend(label)
                                    }
                                },10)
                            }else{
                                that.factor = ''
                                var factor = $('.factor li')
                                that.Lilength = factor.length
                            }
                        }
                    })
                }
            },
            watch:{
                'bpjsons':function(val,oldval){
                    if( val ){
                        $('.stamp').removeAttr("disabled").addClass('activebtn')
                    }
                }
            }
        })
    </script>
    <%-- 引入时间选择器插件 --%>
    <script src="../assets/js/views/DatePicker.js"></script>
</body>
</html>
